<template>
  <div>
    <x-Table
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :rule-form="ruleForms"
      :pagination="pagination"
      @handleAdd="handleAdd"
      @handlePaginationCurrentChange="handlePaginationCurrentChange"
      @handlePaginationSizeChange="handlePaginationSizeChange"
      @handleHeardDel="handleHeardDel"
      @searchForm="searchForm"
      @resetForm="resetForm"

    >
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
      v-dialog-drag
      :title="alertTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
    >
      <form-create
        v-model="fapi"
        :rule="rule"
        :option="option"
        :value.sync="formParam"
        @submit="onSubmit"
      >
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this = null;
export default {
  data(){
    return{
      searchParams: {},//搜索对象
      fapi: {},
      formParam:{},
      rule:[
        {
        "type": "input",
        "field": "title",
        "title": "标题",
        "info": "",
        "_fc_drag_tag": "input",
        "hidden": false,
        "display": true
      },
        {
          "type": "upload",
          "field": "coverImg",
          "title": "上传",
          "info": "",
          "props": {
            "action": "http://www.free.com/api/Upload/upload",
            "onSuccess": function (res,file){
              file.url = res.data[0].url;
            },
            "uploadType":'image',
            'name':'file',
            limit:1
          },
          "_fc_drag_tag": "upload",
          "hidden": false,
          "display": true,
          "value":[]
        },
        {
          "type": "fc-editor",
          "field": "content",
          "title": "富文本框",
          "info": "",
          "_fc_drag_tag": "fc-editor",
          "hidden": false,
          "display": true,
          "props":{
            config:{
              uploadImgServer:'http://www.free.com/api/Upload/upload',
              uploadFileName:'file',
              height:'600',
            }
          }
        },
        {
          "type": "switch",
          "field": "status",
          "title": "状态",
          "info": "",
          "_fc_drag_tag": "switch",
          "hidden": false,
          "display": true
        }],
      row:[],
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "125px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
        resetBtn: true,
      },
      dialogVisible:false,
      alertTitle: "添加",
      tableData:[
        // {
        //   id:1,
        //   title:'萨菲罗斯会计师极乐空间封建时代',
        //   status:false,
        //   content:'萨菲罗斯会计师极乐空间封建时代',
        //   coverImg:'https://lpsjxjyjd-school.oss-cn-beijing.aliyuncs.com/uploads/20211027/9c4d5fe497bf02e14bb4bc0317fa697e.png',
        // }
      ],
      loading:true,
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      ruleForms: {
        account: {label: "标题", prop: "title", type: "text"},
      },
      options: {
        fields: {
          id: {label: "ID", prop: "id", width: "120", order: true},
          title: {label: "标题", prop: "title",},
          content: {label: "内容", prop: "content"},
          image: {
                  label: '图片',
                  prop: 'coverImg',
                  type: 'image',
                  sing:',',
                  style: { width: '30px', height: '30px' },
                  preview: function(scope,item,index) {
                    console.log(scope)
                    console.log(item)
                    console.log(index)
                  },
                },
          status: {
            label: "状态",
            prop: "status",
            type: "switch",
            activeValue: true,
            inactiveValue: false,
            switchChage: function (scope) {

            },
          },
          create_at: {label: "创建时间", prop: "create_time", order: true},
          button: {
            label: "操作",
            width: "130",
            type: "func",
            fixed: true,
            edit: function (scope) {
              _this.row = scope['row'];
              _this.alertTitle = '编辑'
              _this.dialogVisible = true;
              let data = [];
              data.push(scope['row']['coverImg']);
              console.log(data)
              setTimeout(() => {
                _this.fapi.setValue('title',scope['row']['title']);
                _this.fapi.setValue('status',scope['row']['status']);
                _this.fapi.setValue('content',scope['row']['content']);
                _this.fapi.setValue('coverImg',data);
              },0)

            },
            del: function (scope) {
              console.log(scope)
              _this.deleteMajor(scope['row']['id']);
            },
          },
        },
      },
    }
  },
  methods:{
    resetForm:function (){

    },
    onSubmit:function (val){
      if (_this.alertTitle === '添加'){
        _this.createMajor(val);
      }else{
        _this.updateMajor(val);
      }
    },

    searchForm:function (val){
      _this.searchParams = val;
        _this.searchTitle(val)
    },
    handleHeardDel:function (val){
      let data = [];
      val.forEach((item,index) => {
        data.push(item.id)
      })
      _this.deleteMajor(data);

    },
    handlePaginationCurrentChange:function (val){
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.getMajorList(_this.searchParams);

    },
    handlePaginationSizeChange:function (val){
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.getMajorList(_this.searchParams);
    },
    handleAdd:function (val){
      this.alertTitle = '添加';
      this.dialogVisible = true;
      setTimeout(()=>{
        _this.fapi.resetFields();
        _this.fapi.setValue('content','');
      },0)
    },
    getMajorList:function (){
      _this.$store
        .dispatch("portal/setMajorList", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.portal.majorList;
          _this.tableData = data.data;
          console.log(data)
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },
    createMajor:function (param){
      _this.$store
        .dispatch("portal/addMajorList", {
          title: param["title"],
          status: param["status"],
          content:param['content'],
          coverImg: param["coverImg"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.$message.success(msg);
            _this.getMajorList();
          } else {
            _this.$message.error(msg);
          }
        });
    },
    updateMajor:function (param){
      _this.$store
        .dispatch("portal/updateMajor", {
          id:_this.row.id,
          title: param["title"],
          status: param["status"],
          content:param['content'],
          coverImg: param["coverImg"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.$message.success(msg);
            _this.getMajorList();
          } else {
            _this.$message.error(msg);
          }
        });
    },
    deleteMajor:function (val){
      _this.$store
        .dispatch("portal/delMajor", {
          id: val,
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.getMajorList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },
    searchTitle:function (val){
      _this.loading = true;
      _this.$store
        .dispatch("portal/searchTitle", {
          title:val['title'],
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.portal.majorList;
          _this.tableData = data.data;
          console.log(data)
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    }

  },
  created(){
    _this = this;
    _this.getMajorList();

  }
}
</script>

<style scoped>

</style>
